<template>
  <div class="fileUpload">
    <form>
      <input type="file" @change="getFile($event)">
      <button @click="submitForm($event)">提交</button>
    </form>
  </div>
</template>

<script>
  import axios from "axios";
  import qs from "qs";

  export default {
    name: 'fileUpload',
    data() {
      return {
        file: ''
      }
    },
    methods: {
      getFile(event) {
        this.file = event.target.files[0];
        console.log(this.file);
      },
      submitForm(event) {
        event.preventDefault();
        let formData = new FormData();
        formData.append('file', this.file);

        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }

        axios.post('http://localhost:8098/upload', formData, config)
          .then((res) => {
          if (res.status === 200) {
            /*这里做处理*/
            console.log(res.data);
          }
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  ul {
    list-style: none;
  }
</style>
